<template>
  <!-- 表格 -->
  <el-table :data="tableData" style="width: 100%" height="780px" border :header-cell-style="{'background': '#82D1F6','color': 'black'}">
      <el-table-column label="工作描述" min-width="180" align="center">
      <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.gzms }}</span>
      </template>
      </el-table-column>
      <el-table-column label="创建时间" min-width="180" align="center">
      <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
      </el-table-column>
      <el-table-column label="完成时间" min-width="180" align="center">
      <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
      </el-table-column>
      <el-table-column label="创建人" min-width="180" align="center">
      <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
              <el-tag size="medium" class="custom-tag" :style="{ backgroundColor: getBackgroundColor(scope.$index) }">{{ scope.row.name }}</el-tag>
          </div>
      </template>
      </el-table-column>
      <el-table-column label="交付物" min-width="180" align="center">
      <template slot-scope="scope">
          <el-button type="text">{{ "交付物.zip" }}</el-button>
      </template>
      </el-table-column>
      <el-table-column label="状态" min-width="180" align="center">
      <template slot-scope="scope">
          <el-button class="custom-tag" style="color:white;" size="small" :type="scope.row.zt == '进行中' ? 'success' : scope.row.zt == '未开始' ? 'warning' : 'danger'" round>{{ scope.row.zt }}</el-button>
      </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="200">
      <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          <el-button type="text">填报</el-button>
          <el-button type="text">概览</el-button>
          <el-button type="text">意见</el-button>
      </template>
      </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
      return {
          tableData: [
              {
              gzms:"某某某专项工作可研编写-初稿",
              date: "2016-05-02",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1518 弄",
              zt: "未开始",
              },
              {
              gzms:"某某项目研发工作",
              date: "2016-05-04",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1517 弄",
              zt: "红灯",
              },
              {
              gzms:"Q1季度某某工作评审",
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              zt: "进行中",
              },
              {
              gzms:"某某某研发项目工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "未开始",
              },
              {
              gzms:"2024年Q2季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "未开始",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
              {
              gzms:"2024年Q3季度专项工作",
              date: "2016-05-03",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1516 弄",
              zt: "红灯",
              },
          ]
      }
  },
  methods: {
      // 按钮添加颜色
      getBackgroundColor(index) {
      const colors = ['#B4FDFF', '#CEE7FF', '#75F9FD', '#FFBF6C','#CEE7FF'];
      return colors[index % colors.length];
      },
  }
}
</script>
